<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>

<body>
    <!-- 组件的定义 -->
    <!-- 
        设计组件的时候，会定义哪些参数是从父组件传递进来 
            1. title 字符串类型
            2. list 数组类型。 数组有一个name属性用于展示
    -->
    <template id="sonTemp">
        <div>
            <h3>{{title}}</h3>
            <ul>
                <li v-for="item in courseList"> {{item.courseTitle}}</li>
            </ul>
            {{type}}
        </div>
    </template>
    <script>
        const son = {
            template: '#sonTemp',
            data() {
                return {
                    courseList: []
                }
            },
            // 声明哪些参数是需要从父组件传递进来的
            // props: ['title', 'list']
            props: {
                // 指定参数的类型
                title: {
                    type: String,
                    default: '默认标题***********'
                },
                list: {
                    type: Array,
                    default () {
                        return []
                    }
                },
                type: [String, Number]
            },
            created() {
                // 定义post请求的body
                let params = new URLSearchParams()
                console.log(this.title);
                // 可以直接通过this拿到props上的值
                params.append('type', this.type)
                params.append('pageNum', 1)
                params.append('pageSize', 5)
                axios.post('http://59.111.104.104:8086/weChat/applet/course/list/type',
                    params).then(res => {
                    console.log(res);
                    this.courseList = res.data.rows
                })
            },
        }
        Vue.component('son', son)
    </script>




    <template id="fatherTemp">
        <div>
            <!-- 组件传递参数的时候和属性是一样的 -->
            <son title="免费课程" :list="freeList" type="free"></son>
            <son title="打折课程" :list="payList" v-bind:type="'discount'"></son>
            <son title="精品课程" :list="[{id:3,name:'345'}]" type="boutique"></son>

        </div>
    </template>
    <script>
        const father = {
            template: '#fatherTemp',
            data() {
                return {
                    freeList: [{
                            id: 1,
                            name: '大数据'
                        },
                        {
                            id: 2,
                            name: '前端'
                        },
                    ],
                    payList: [{
                            id: 1,
                            name: '大数据进阶'
                        },
                        {
                            id: 2,
                            name: 'vue'
                        },
                    ]
                }
            }
        }
        Vue.component('father', father)
    </script>




    <div id='app'>
        <father></father>
    </div>

    <script>
        const vm = new Vue({
            el: '#app',
            data: {

            }
        })
    </script>
</body>

</html>